<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>飞扬的小鸟 - Flappy Bird</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Arial', 'Microsoft YaHei', sans-serif;
            background: linear-gradient(to bottom, #87CEEB 0%, #98D8E8 100%);
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            overflow: hidden;
        }

        #gameContainer {
            position: relative;
            width: 100%;
            max-width: 400px;
            height: 600px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            border-radius: 10px;
            overflow: hidden;
            transition: all 0.3s ease;
        }

        /* PC端样式 - 放大游戏区域 */
        @media (min-width: 768px) {
            #gameContainer {
                max-width: 800px;
                height: 600px;
            }
            
            h1 {
                font-size: 3.5em !important;
            }
            
            .button {
                padding: 18px 50px !important;
                font-size: 1.3em !important;
            }
            
            #score {
                font-size: 3.5em !important;
            }
            
            #instructions {
                font-size: 1.2em !important;
            }
        }

        #gameCanvas {
            display: block;
            background: linear-gradient(to bottom, #87CEEB 0%, #98D8E8 100%);
            cursor: pointer;
            touch-action: none;
            width: 100%;
            height: 100%;
        }

        #startScreen, #gameOverScreen {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: white;
            z-index: 10;
        }

        #gameOverScreen {
            display: none;
        }

        h1 {
            font-size: 2.5em;
            margin-bottom: 15px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
            transition: font-size 0.3s ease;
            text-align: center;
            line-height: 1.2;
        }

        .subtitle {
            font-size: 0.4em;
            color: #FFD700;
            margin-top: -10px;
            margin-bottom: 20px;
        }

        .button {
            background: linear-gradient(135deg, #FFD700, #FFA500);
            color: #333;
            border: none;
            padding: 12px 35px;
            font-size: 1.1em;
            font-weight: bold;
            border-radius: 30px;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4);
            margin: 5px;
        }

        .button:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(255, 215, 0, 0.6);
        }

        .button:active {
            transform: translateY(0);
        }

        #score {
            position: absolute;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 2.5em;
            font-weight: bold;
            color: white;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
            z-index: 5;
            transition: font-size 0.3s ease;
        }

        #instructions {
            position: absolute;
            bottom: 80px;
            left: 50%;
            transform: translateX(-50%);
            text-align: center;
            color: white;
            font-size: 1em;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
            transition: font-size 0.3s ease;
            line-height: 1.4;
        }

        #bestScore {
            margin-top: 15px;
            font-size: 1.3em;
            color: #FFD700;
        }

        @media (max-width: 480px) {
            #gameContainer {
                max-width: 100%;
                height: 100vh;
                border-radius: 0;
            }
            
            h1 {
                font-size: 2em !important;
            }
            
            #instructions {
                bottom: 60px;
                font-size: 0.9em;
            }
        }

        /* PC端提示样式 */
        .pc-hint {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0, 0, 0, 0.6);
            color: white;
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 0.85em;
            display: none;
            z-index: 15;
        }

        @media (min-width: 768px) {
            .pc-hint {
                display: block;
            }
        }

        /* 头像上传样式 */
        .avatar-upload-container {
            margin: 15px 0;
            text-align: center;
            max-width: 90%;
        }

        .avatar-preview {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            border: 3px solid #FFD700;
            margin: 10px auto;
            overflow: hidden;
            background: #fff;
            display: none;
            position: relative;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
        }

        .avatar-preview img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .avatar-preview .default-bird {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 35px;
        }

        .upload-options {
            display: flex;
            gap: 8px;
            justify-content: center;
            flex-wrap: wrap;
            margin: 10px 0;
        }

        .upload-button {
            background: linear-gradient(135deg, #4CAF50, #45a049);
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 20px;
            cursor: pointer;
            font-size: 0.9em;
            transition: all 0.3s ease;
            display: inline-block;
            text-decoration: none;
            box-shadow: 0 2px 8px rgba(76, 175, 80, 0.4);
        }

        .upload-button:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(76, 175, 80, 0.6);
        }

        .upload-button.camera {
            background: linear-gradient(135deg, #2196F3, #1976D2);
            box-shadow: 0 2px 8px rgba(33, 150, 243, 0.4);
        }

        .upload-button.camera:hover {
            box-shadow: 0 4px 12px rgba(33, 150, 243, 0.6);
        }

        #fileInput, #cameraInput {
            display: none;
        }

        .remove-avatar {
            background: linear-gradient(135deg, #f44336, #da190b);
            color: white;
            border: none;
            padding: 4px 12px;
            border-radius: 15px;
            cursor: pointer;
            font-size: 0.8em;
            margin-top: 8px;
            display: none;
            box-shadow: 0 2px 6px rgba(244, 67, 54, 0.4);
        }

        .remove-avatar:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 10px rgba(244, 67, 54, 0.6);
        }

        /* 移动端优化 */
        @media (max-width: 768px) {
            .upload-button {
                padding: 10px 16px;
                font-size: 0.85em;
            }
            
            .avatar-preview {
                width: 80px;
                height: 80px;
            }
            
            .upload-options {
                flex-direction: row;
                align-items: center;
                gap: 6px;
            }
            
            .upload-button {
                min-width: 100px;
            }
        }

        /* 错误提示样式 */
        .error-message {
            color: #ff6b6b;
            font-size: 0.8em;
            margin-top: 8px;
            display: none;
        }

        /* 上传提示 */
        .upload-hint {
            font-size: 0.75em;
            color: #ccc;
            margin-top: 5px;
        }

        /* 激励语句 */
        .motivation-text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            color: #FFD700;
            font-size: 1.2em;
            font-weight: bold;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
            display: none;
            z-index: 20;
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0% { opacity: 0.8; transform: translate(-50%, -50%) scale(1); }
            50% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
            100% { opacity: 0.8; transform: translate(-50%, -50%) scale(1); }
        }

        /* 响应式调整 */
        @media (max-height: 600px) {
            #instructions {
                bottom: 50px;
                font-size: 0.8em;
            }
        }
    </style>
</head>
<body>
    <div id="gameContainer">
        <canvas id="gameCanvas"></canvas>
        <div id="score">0</div>
        
        <div id="startScreen">
            <h1>
                飞扬的小鸟<br>
                <span class="subtitle">Flappy Bird</span>
            </h1>
            
            <div class="avatar-upload-container">
                <div class="avatar-preview" id="avatarPreview">
                    <div class="default-bird">🐦</div>
                </div>
                
                <div class="upload-options">
                    <input type="file" id="fileInput" accept="image/*">
                    <input type="file" id="cameraInput" accept="image/*" capture="environment">
                    
                    <label for="fileInput" class="upload-button">
                        📷 相册 / Album
                    </label>
                    
                    <label for="cameraInput" class="upload-button camera">
                        📸 拍照 / Camera
                    </label>
                </div>
                
                <button class="remove-avatar" id="removeAvatar" onclick="removeCustomAvatar()">
                    移除 / Remove
                </button>
                
                <div class="error-message" id="errorMessage"></div>
                <div class="upload-hint">支持 JPG、PNG，最大 5MB / Support JPG, PNG, Max 5MB</div>
            </div>
            
            <button class="button" onclick="startGame()">
                开始游戏 / Start Game
            </button>
            
            <div id="instructions">
                <p style="font-size: 0.9em;">点击或触摸屏幕飞翔！</p>
                <p style="font-size: 0.8em;">Click or Tap to Fly!</p>
                <p style="margin-top: 8px; font-size: 0.8em;">简单模式 - 弱重力 / Easy Mode</p>
            </div>
        </div>
        
        <div id="gameOverScreen">
            <h1>
                游戏结束<br>
                <span class="subtitle">Game Over</span>
            </h1>
            <div id="finalScore" style="font-size: 1.8em; margin: 15px 0;">
                得分 / Score: 0
            </div>
            <div id="bestScore">最高分 / Best: 0</div>
            <button class="button" onclick="restartGame()" style="margin-top: 25px;">
                再玩一次 / Play Again
            </button>
        </div>
        
        <div class="pc-hint">按空格键或点击飞翔 / Press SPACE or Click to Fly</div>
        <div class="motivation-text" id="motivationText"></div>
    </div>

    <script>
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');
        const gameContainer = document.getElementById('gameContainer');
        
        // Game variables
        let gameRunning = false;
        let score = 0;
        let bestScore = localStorage.getItem('flappyBestScore') || 0;
        let customAvatar = null;
        
        // Bird properties
        let bird = {
            x: 0,
            y: 0,
            radius: 20,
            velocity: 0,
            gravity: 0.15,
            jumpPower: -4.5,
            rotation: 0
        };
        
        // Pipe properties
        const pipes = [];
        let pipeWidth = 60;
        let pipeGap = 180;
        let pipeSpeed = 2;
        let pipeTimer = 0;
        const pipeInterval = 120;
        
        // Background elements
        const clouds = [];
        
        // 激励语句
        const motivationMessages = [
            { zh: "太棒了！继续加油！", en: "Awesome! Keep going!" },
            { zh: "你真聪明！", en: "You're so smart!" },
            { zh: "做得很好！", en: "Great job!" },
            { zh: "继续努力！", en: "Keep trying!" },
            { zh: "你是最棒的！", en: "You're the best!" },
            { zh: "学习真有趣！", en: "Learning is fun!" },
            { zh: "相信自己！", en: "Believe in yourself!" },
            { zh: "每天进步一点点！", en: "Improve a little every day!" }
        ];
        
        // 头像上传相关
        const fileInput = document.getElementById('fileInput');
        const cameraInput = document.getElementById('cameraInput');
        const avatarPreview = document.getElementById('avatarPreview');
        const removeAvatarBtn = document.getElementById('removeAvatar');
        const errorMessage = document.getElementById('errorMessage');
        const motivationText = document.getElementById('motivationText');
        
        // 显示激励语句
        function showMotivation() {
            const message = motivationMessages[Math.floor(Math.random() * motivationMessages.length)];
            motivationText.innerHTML = `${message.zh}<br><span style="font-size: 0.8em;">${message.en}</span>`;
            motivationText.style.display = 'block';
            
            setTimeout(() => {
                motivationText.style.display = 'none';
            }, 2000);
        }
        
        // 统一的文件处理函数
        function handleFileSelect(file) {
            errorMessage.style.display = 'none';
            
            if (!file) return;
            
            // 检查文件类型
            if (!file.type.startsWith('image/')) {
                showError('请选择图片文件 / Please select an image file');
                return;
            }
            
            // 检查文件大小（限制为5MB）
            if (file.size > 5 * 1024 * 1024) {
                showError('图片大小不能超过5MB / Image size cannot exceed 5MB');
                return;
            }
            
            // 使用FileReader读取文件
            const reader = new FileReader();
            
            reader.onloadstart = function() {
                // 可以添加加载动画
            };
            
            reader.onload = function(event) {
                try {
                    const img = new Image();
                    
                    img.onload = function() {
                        // 图片加载成功
                        customAvatar = img;
                        
                        // 创建预览图片
                        const previewImg = document.createElement('img');
                        previewImg.src = event.target.result;
                        previewImg.alt = "Custom Avatar";
                        
                        // 清空预览区域并添加新图片
                        avatarPreview.innerHTML = '';
                        avatarPreview.appendChild(previewImg);
                        avatarPreview.style.display = 'block';
                        removeAvatarBtn.style.display = 'inline-block';
                        
                        // 隐藏错误信息
                        errorMessage.style.display = 'none';
                        
                        // 显示激励语句
                        showMotivation();
                    };
                    
                    img.onerror = function() {
                        showError('图片加载失败，请重试 / Image loading failed, please try again');
                    };
                    
                    // 设置图片源
                    img.src = event.target.result;
                    
                } catch (error) {
                    console.error('图片处理错误:', error);
                    showError('图片处理失败，请重试 / Image processing failed, please try again');
                }
            };
            
            reader.onerror = function() {
                showError('文件读取失败，请重试 / File reading failed, please try again');
            };
            
            // 开始读取文件
            reader.readAsDataURL(file);
        }
        
        // 相册选择文件
        fileInput.addEventListener('change', function(e) {
            const file = e.target.files[0];
            handleFileSelect(file);
        });
        
        // 相机拍照
        cameraInput.addEventListener('change', function(e) {
            const file = e.target.files[0];
            handleFileSelect(file);
        });
        
        // 显示错误信息
        function showError(message) {
            errorMessage.textContent = message;
            errorMessage.style.display = 'block';
            
            // 3秒后自动隐藏错误信息
            setTimeout(() => {
                errorMessage.style.display = 'none';
            }, 3000);
        }
        
        // 移除自定义头像
        function removeCustomAvatar() {
            customAvatar = null;
            avatarPreview.style.display = 'none';
            removeAvatarBtn.style.display = 'none';
            fileInput.value = '';
            cameraInput.value = '';
            errorMessage.style.display = 'none';
            
            // 恢复默认小鸟图标
            avatarPreview.innerHTML = '<div class="default-bird">🐦</div>';
        }
        
        // Set canvas size and initialize game elements
        function initGame() {
            canvas.width = gameContainer.clientWidth;
            canvas.height = gameContainer.clientHeight;
            
            if (window.innerWidth >= 768) {
                bird.radius = 30;
                pipeWidth = 80;
                pipeGap = 220;
                bird.gravity = 0.15;
                bird.jumpPower = -5;
                pipeSpeed = 2.5;
            } else {
                bird.radius = 20;
                pipeWidth = 60;
                pipeGap = 180;
                bird.gravity = 0.15;
                bird.jumpPower = -4.5;
                pipeSpeed = 2;
            }
            
            bird.x = canvas.width * 0.2;
            bird.y = canvas.height / 2;
            bird.velocity = 0;
            bird.rotation = 0;
            
            clouds.length = 0;
            const cloudCount = window.innerWidth >= 768 ? 5 : 3;
            for (let i = 0; i < cloudCount; i++) {
                clouds.push({
                    x: Math.random() * canvas.width,
                    y: Math.random() * canvas.height * 0.4,
                    width: 60 + Math.random() * 40,
                    speed: 0.5 + Math.random() * 0.5
                });
            }
            
            pipes.length = 0;
            pipeTimer = 0;
        }
        
        initGame();
        
        window.addEventListener('resize', () => {
            if (!gameRunning) {
                initGame();
                draw();
            }
        });
        
        function handleInput() {
            if (gameRunning) {
                bird.velocity = bird.jumpPower;
            }
        }
        
        canvas.addEventListener('click', handleInput);
        canvas.addEventListener('touchstart', (e) => {
            e.preventDefault();
            handleInput();
        });
        
        document.addEventListener('keydown', (e) => {
            if (e.code === 'Space' && gameRunning) {
                e.preventDefault();
                handleInput();
            }
        });
        
        function startGame() {
            document.getElementById('startScreen').style.display = 'none';
            gameRunning = true;
            resetGame();
            gameLoop();
        }
        
        function resetGame() {
            initGame();
            score = 0;
            updateScore();
        }
        
        function restartGame() {
            document.getElementById('gameOverScreen').style.display = 'none';
            gameRunning = true;
            resetGame();
            gameLoop();
        }
        
        function updateScore() {
            document.getElementById('score').textContent = score;
            
            // 每得5分显示一次激励语句
            if (score > 0 && score % 5 === 0) {
                showMotivation();
            }
        }
        
        function gameOver() {
            gameRunning = false;
            document.getElementById('finalScore').textContent = `得分 / Score: ${score}`;
            if (score > bestScore) {
                bestScore = score;
                localStorage.setItem('flappyBestScore', bestScore);
            }
            document.getElementById('bestScore').textContent = `最高分 / Best: ${bestScore}`;
            document.getElementById('gameOverScreen').style.display = 'flex';
        }
        
        function createPipe() {
            const minHeight = 50;
            const maxHeight = canvas.height - pipeGap - minHeight - 100;
            const topHeight = minHeight + Math.random() * (maxHeight - minHeight);
            
            pipes.push({
                x: canvas.width,
                topHeight: topHeight,
                bottomY: topHeight + pipeGap,
                passed: false
            });
        }
        
        function updateBird() {
            bird.velocity += bird.gravity;
            bird.y += bird.velocity;
            bird.rotation = Math.min(Math.max(bird.velocity * 3, -30), 90);
            
            if (bird.y - bird.radius < 0 || bird.y + bird.radius > canvas.height) {
                gameOver();
            }
        }
        
        function updatePipes() {
            pipeTimer++;
            if (pipeTimer >= pipeInterval) {
                createPipe();
                pipeTimer = 0;
            }
            
            for (let i = pipes.length - 1; i >= 0; i--) {
                const pipe = pipes[i];
                pipe.x -= pipeSpeed;
                
                if (!pipe.passed && pipe.x + pipeWidth < bird.x) {
                    pipe.passed = true;
                    score++;
                    updateScore();
                }
                
                if (pipe.x + pipeWidth < 0) {
                    pipes.splice(i, 1);
                }
                
                if (checkCollision(pipe)) {
                    gameOver();
                }
            }
        }
        
        function checkCollision(pipe) {
            if (bird.x + bird.radius > pipe.x && bird.x - bird.radius < pipe.x + pipeWidth) {
                if (bird.y - bird.radius < pipe.topHeight || bird.y + bird.radius > pipe.bottomY) {
                    return true;
                }
            }
            return false;
        }
        
        function drawBird() {
            ctx.save();
            ctx.translate(bird.x, bird.y);
            ctx.rotate(bird.rotation * Math.PI / 180);
            
            if (customAvatar) {
                // 绘制自定义头像
                ctx.beginPath();
                ctx.arc(0, 0, bird.radius, 0, Math.PI * 2);
                ctx.closePath();
                ctx.clip();
                
                const size = bird.radius * 2;
                ctx.drawImage(customAvatar, -bird.radius, -bird.radius, size, size);
                
                // 添加眼睛效果
                ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
                ctx.beginPath();
                ctx.arc(bird.radius * 0.3, -bird.radius * 0.2, bird.radius * 0.15, 0, Math.PI * 2);
                ctx.fill();
                
                ctx.fillStyle = 'black';
                ctx.beginPath();
                ctx.arc(bird.radius * 0.35, -bird.radius * 0.2, bird.radius * 0.08, 0, Math.PI * 2);
                ctx.fill();
            } else {
                // 绘制默认小鸟
                ctx.fillStyle = '#FFD700';
                ctx.beginPath();
                ctx.arc(0, 0, bird.radius, 0, Math.PI * 2);
                ctx.fill();
                
                ctx.fillStyle = 'white';
                ctx.beginPath();
                ctx.arc(bird.radius * 0.4, -bird.radius * 0.25, bird.radius * 0.3, 0, Math.PI * 2);
                ctx.fill();
                
                ctx.fillStyle = 'black';
                ctx.beginPath();
                ctx.arc(bird.radius * 0.5, -bird.radius * 0.25, bird.radius * 0.15, 0, Math.PI * 2);
                ctx.fill();
                
                ctx.fillStyle = '#FF6347';
                ctx.beginPath();
                ctx.moveTo(bird.radius * 0.75, 0);
                ctx.lineTo(bird.radius * 1.4, 0);
                ctx.lineTo(bird.radius * 0.75, bird.radius * 0.25);
                ctx.closePath();
                ctx.fill();
                
                ctx.fillStyle = '#FFA500';
                ctx.beginPath();
                ctx.ellipse(-bird.radius * 0.25, bird.radius * 0.25, bird.radius * 0.6, bird.radius * 0.4, -20 * Math.PI / 180, 0, Math.PI * 2);
                ctx.fill();
            }
            
            ctx.restore();
        }
        
        function drawPipe(pipe) {
            const gradient = ctx.createLinearGradient(pipe.x, 0, pipe.x + pipeWidth, 0);
            gradient.addColorStop(0, '#228B22');
            gradient.addColorStop(0.5, '#32CD32');
            gradient.addColorStop(1, '#228B22');
            
            ctx.fillStyle = gradient;
            ctx.fillRect(pipe.x, 0, pipeWidth, pipe.topHeight);
            
            ctx.fillStyle = '#006400';
            ctx.fillRect(pipe.x - 5, pipe.topHeight - 30, pipeWidth + 10, 30);
            
            ctx.fillStyle = gradient;
            ctx.fillRect(pipe.x, pipe.bottomY, pipeWidth, canvas.height - pipe.bottomY);
            
            ctx.fillStyle = '#006400';
            ctx.fillRect(pipe.x - 5, pipe.bottomY, pipeWidth + 10, 30);
        }
        
        function drawCloud(cloud) {
            ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
            ctx.beginPath();
            ctx.arc(cloud.x, cloud.y, cloud.width * 0.3, 0, Math.PI * 2);
            ctx.arc(cloud.x + cloud.width * 0.3, cloud.y, cloud.width * 0.4, 0, Math.PI * 2);
            ctx.arc(cloud.x + cloud.width * 0.6, cloud.y, cloud.width * 0.3, 0, Math.PI * 2);
            ctx.fill();
        }
        
        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            const bgGradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
            bgGradient.addColorStop(0, '#87CEEB');
            bgGradient.addColorStop(1, '#98D8E8');
            ctx.fillStyle = bgGradient;
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            
            clouds.forEach(cloud => {
                cloud.x -= cloud.speed;
                if (cloud.x + cloud.width < 0) {
                    cloud.x = canvas.width + cloud.width;
                    cloud.y = Math.random() * canvas.height * 0.4;
                }
                drawCloud(cloud);
            });
            
            pipes.forEach(pipe => drawPipe(pipe));
            drawBird();
            
            ctx.fillStyle = '#8B4513';
            ctx.fillRect(0, canvas.height - 20, canvas.width, 20);
            
            ctx.fillStyle = '#228B22';
            ctx.fillRect(0, canvas.height - 25, canvas.width, 5);
        }
        
        function gameLoop() {
            if (!gameRunning) return;
            
            updateBird();
            updatePipes();
            draw();
            
            requestAnimationFrame(gameLoop);
        }
        
        draw();
    </script>
</body>
</html>